<template>
  <view class="bar-sticky common-nav">
    <view class="bar-sticky">
      <navigationBar :custom="true">
        <view class="nav-title">
          <view class="search" style="width: 70vw; padding: 0 0 0 14upx">
            <view class="search-input">
              <navigator url="./search/search">
                <u-search
                  height="60"
                  color="#8486f8"
                  :show-action="false"
                  placeholder=" "
                  :disabled="true"
                ></u-search>
                <view class="search-notice">
                  <u-notice-bar
                    mode="vertical"
                    type="none"
                    duration="3000"
                    :font-size="22"
                    :list="controlTextList"
                    :volume-icon="false"
                  ></u-notice-bar>
                </view>
              </navigator>
            </view>
          </view>
        </view>
      </navigationBar>
      <!--      <view
        class="tips"
        :style="{ top: stateHeight + navHeight + 'px', zIndex: 999 }"
        v-show="showTips"
      >
        <view class="tips-content flex">
          <image src="/static/icon/add-a.png" mode="widthFix"></image>
          <view class="title">
            将
            <text style="color: #8486f8; font-weight: 600">“前端知识”</text>
            添加到我的小程序，以后使用更方便
          </view>
        </view>
      </view> -->
    </view>
  </view>
</template>

<script>
import navigationBar from "../navigationBar/navigationBar.vue"
export default {
  props: ["searchArticleList"],
  name: "commonNav",
  components: { navigationBar },
  data() {
    return {
      navigationBarStyle: {
        background: "#8486f8",
        iconText: "", //导航栏文字
      },
      navHeight: 0,
      showTips: true,
    }
  },
  computed: {
    // 限制标题17个字后面的点点
    controlTextList() {
      let list = this.searchArticleList
      list.forEach((item, index) => {
        if (item.length > 17) {
          // 限制字数17个字
          list[index] = item.slice(0, 17) + "..."
        }
      })
      return this.searchArticleList
    },
  },
  mounted() {
    // setTimeout(() => {
    //   this.showTips = false
    // }, 5000)
    // let stateHeight = 0 //  接收状态栏高度
    // let navHeight = uni.getMenuButtonBoundingClientRect().height //  获取胶囊高度
    // let top = 0
    // uni.getSystemInfo({
    //   success(res) {
    //     stateHeight = res.statusBarHeight
    //   },
    // })
    // top = wx.getMenuButtonBoundingClientRect().top - stateHeight //  获取top值
    // this.navHeight = navHeight + top * 2
    // this.stateHeight = stateHeight
  },
}
</script>

<style lang="scss" scoped></style>
